import React, { useEffect, useState } from 'react';
import { Button, Modal, Checkbox, Form, Input } from 'antd';
import { connect } from 'umi';


function sandModal({ open, close, type, data,dispatch }: any) {
  const [form] = Form.useForm();
  const handleOk = () => {
    console.log(form.getFieldsValue());
    const values=form.getFieldsValue()
    if (type === 'add') {
        dispatch({ type: 'area/addsand', payload: values });
      } else if (type === 'edit') {
        dispatch({ type: 'area/editsand', payload: {...values,id:data.id} });
        // dispatch({
        //   type: 'area/editname',
        //   payload: { kefu_name: values.kefu_name },
        // });
      }
    close();
  };
  const handleCancel = () => {
    close();
    form.resetFields();
  };
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  useEffect(() => {
    type === 'edit'
      ? form.setFieldsValue({ ...data})
      : form.resetFields();
  }, [open]);

  return (
    <div>
      <Modal
        title={type === 'add' ? '添加楼栋' : `编辑-${data.title}`}
        open={open}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          //   initialValues={{ ...data}}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          <Form.Item label="楼栋名称" name="title">
            <Input placeholder="楼栋名称" />
          </Form.Item>

          <Form.Item label="单元数" name="unit">
            <Input placeholder="单元数" />
          </Form.Item>
          <Form.Item label="电梯数" name="elevator">
            <Input placeholder="电梯数" />
          </Form.Item>

          <Form.Item label="总楼层" name="floor_num">
            <Input placeholder="12" />
          </Form.Item>

          <Form.Item label="总户数" name="room_num">
            <Input placeholder="22" />
          </Form.Item>

          <Form.Item label="开盘时间" name="open_time">
            <Input placeholder="2017-12-22" />
          </Form.Item>

          <Form.Item label="交房时间" name="complate_time">
            <Input placeholder="2017-12-22" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default connect()(sandModal);
